<template>
    <!-- 主题类型：音频 -->
    <div class="list-audio-component-item">
        <a :href="info.content.modelUrl">
            <img src="../assets/images/audio_play_.png" class="list-audio-component-img"/>
            <div class="list-audio-component-title">{{info.content.name}}</div>
            <div class="list-audio-component-channel">{{info.content.channelName}}</div>
        </a>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            },
        },
        mounted: function () {
           // console.log(JSON.stringify(this.info))
        }
    }
</script>

<style scoped>
    .list-audio-component-item {
        width: 100%;
        border-bottom: 1px solid #EDEDED;
        height: 61px;
        padding: 14px 0px 14px 38px;
        box-sizing: border-box;
        position: relative;
    }

    .list-audio-component-img {
        position: absolute;
        top: 15px;
        left: 0;
        height: 28px;
        width: 28px;
        object-fit: cover;
    }

    .list-audio-component-title {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        line-height: 16px;
        height: 16px;
        font-family: "PingFangSC";
        color: #222;
    }

    .list-audio-component-channel {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        height: 12px;
        line-height: 12px;
        margin-top: 5px;
        font-family: "PingFangSC";
        color: #999;
    }

    a {
        text-decoration: none;
    }
</style>